<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5px字体显示方法</title>
  <style>
    body {
      margin: 0;
      padding: 30px;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      color: #333;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    h1 {
      text-align: center;
      color: #2d3748;
      margin-bottom: 30px;
      font-size: 28px;
      font-weight: 700;
    }

    .method-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 25px;
      transition: all 0.3s ease;
    }

    .method-card:hover {
      border-color: #4299e1;
      box-shadow: 0 8px 25px rgba(66, 153, 225, 0.15);
    }

    .method-title {
      font-size: 20px;
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

    .method-icon {
      margin-right: 10px;
      font-size: 24px;
    }

    .demo-box {
      background: white;
      border: 2px dashed #cbd5e0;
      border-radius: 8px;
      padding: 20px;
      margin: 15px 0;
      position: relative;
    }

    .demo-label {
      position: absolute;
      top: -10px;
      left: 15px;
      background: white;
      padding: 0 8px;
      font-size: 12px;
      color: #718096;
      font-weight: 500;
    }

    /* 方法一：Transform Scale */
    .transform-tiny {
      font-size: 10px;
      transform: scale(0.5);
      transform-origin: left top;
      display: inline-block;
      color: #e53e3e;
      font-weight: bold;
    }

    /* 方法二：强制设置 */
    .force-tiny {
      font-size: 5px !important;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      color: #38a169;
      font-weight: bold;
    }

    /* 方法三：Zoom */
    .zoom-tiny {
      font-size: 10px;
      zoom: 0.5;
      color: #3182ce;
      font-weight: bold;
    }

    /* 对比用的正常字体 */
    .normal-text {
      font-size: 16px;
      color: #2d3748;
      margin: 10px 0;
    }

    .comparison-text {
      font-size: 12px;
      color: #718096;
      margin: 5px 0;
    }

    .code-block {
      background: #2d3748;
      color: #e2e8f0;
      padding: 15px;
      border-radius: 8px;
      font-family: 'Courier New', monospace;
      font-size: 13px;
      margin-top: 10px;
      overflow-x: auto;
      border-left: 4px solid #4299e1;
    }

    .warning {
      background: #fed7d7;
      border: 1px solid #feb2b2;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
      color: #c53030;
    }

    .warning-icon {
      margin-right: 8px;
    }

    .tip {
      background: #c6f6d5;
      border: 1px solid #9ae6b4;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
      color: #22543d;
    }

    .tip-icon {
      margin-right: 8px;
    }

    .browser-support {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }

    .browser-item {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 15px;
      text-align: center;
    }

    .browser-name {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 5px;
    }

    .browser-support-level {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 500;
    }

    .support-good {
      background: #c6f6d5;
      color: #22543d;
    }

    .support-partial {
      background: #feebc8;
      color: #c05621;
    }

    .support-poor {
      background: #fed7d7;
      color: #c53030;
    }

    .measure-ruler {
      display: inline-block;
      width: 50px;
      height: 1px;
      background: #e2e8f0;
      margin: 0 10px;
      vertical-align: middle;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>�� 前端显示 5px 字体的方法</h1>

  <div class="warning">
    <span class="warning-icon">⚠️</span>
    <strong>重要提醒：</strong>大多数浏览器都有最小字体大小限制（Chrome 12px，Firefox/Safari 9px），直接设置 5px 可能无效。
  </div>

  <!-- 方法一：Transform Scale -->
  <div class="method-card">
    <div class="method-title">
      <span class="method-icon">��</span>
      方法一：Transform Scale（推荐）
    </div>
    <div class="demo-box">
      <div class="demo-label">效果演示</div>
      <div class="normal-text">正常 16px 文字</div>
      <div class="comparison-text">普通 12px 文字</div>
      <div class="transform-tiny">这是使用 transform scale 实现的 5px 效果文字</div>
      <div class="measure-ruler"></div>
      <span style="font-size: 10px; color: #718096;">参考：10px文字</span>
    </div>
    <div class="code-block">
      .transform-tiny {
      font-size: 10px;              /* 基础字体大小 */
      transform: scale(0.5);        /* 缩放到 50% = 5px 效果 */
      transform-origin: left top;   /* 缩放起点 */
      display: inline-block;        /* 必须设置 */
      }</div>
    <div class="browser-support">
      <div class="browser-item">
        <div class="browser-name">Chrome</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Firefox</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Safari</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Edge</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
    </div>
  </div>

  <!-- 方法二：强制设置 -->
  <div class="method-card">
    <div class="method-title">
      <span class="method-icon">��</span>
      方法二：强制设置 + 禁用缩放
    </div>
    <div class="demo-box">
      <div class="demo-label">效果演示</div>
      <div class="normal-text">正常 16px 文字</div>
      <div class="comparison-text">普通 12px 文字</div>
      <div class="force-tiny">这是强制设置 5px 的文字（可能在某些浏览器中无效）</div>
      <div class="measure-ruler"></div>
      <span style="font-size: 10px; color: #718096;">参考：10px文字</span>
    </div>
    <div class="code-block">
      .force-tiny {
      font-size: 5px !important;         /* 强制设置 5px */
      -webkit-text-size-adjust: none;    /* 禁用 WebKit 字体缩放 */
      -moz-text-size-adjust: none;       /* 禁用 Firefox 字体缩放 */
      }</div>
    <div class="browser-support">
      <div class="browser-item">
        <div class="browser-name">Chrome</div>
        <div class="browser-support-level support-poor">受限制</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Firefox</div>
        <div class="browser-support-level support-partial">部分支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Safari</div>
        <div class="browser-support-level support-partial">部分支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Edge</div>
        <div class="browser-support-level support-poor">受限制</div>
      </div>
    </div>
  </div>

  <!-- 方法三：CSS Zoom -->
  <div class="method-card">
    <div class="method-title">
      <span class="method-icon">��</span>
      方法三：CSS Zoom（仅 WebKit）
    </div>
    <div class="demo-box">
      <div class="demo-label">效果演示</div>
      <div class="normal-text">正常 16px 文字</div>
      <div class="comparison-text">普通 12px 文字</div>
      <div class="zoom-tiny">这是使用 CSS zoom 实现的 5px 效果文字</div>
      <div class="measure-ruler"></div>
      <span style="font-size: 10px; color: #718096;">参考：10px文字</span>
    </div>
    <div class="code-block">
      .zoom-tiny {
      font-size: 10px;    /* 基础字体大小 */
      zoom: 0.5;          /* 缩放到 50% = 5px 效果 */
      }</div>
    <div class="browser-support">
      <div class="browser-item">
        <div class="browser-name">Chrome</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Firefox</div>
        <div class="browser-support-level support-poor">不支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Safari</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Edge</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
    </div>
  </div>

  <!-- 方法四：SVG 文本 -->
  <div class="method-card">
    <div class="method-title">
      <span class="method-icon">��</span>
      方法四：SVG 文本
    </div>
    <div class="demo-box">
      <div class="demo-label">效果演示</div>
      <div class="normal-text">正常 16px 文字</div>
      <div class="comparison-text">普通 12px 文字</div>
      <svg width="300" height="25" style="margin: 10px 0;">
        <text x="0" y="15" font-size="5px" fill="#9f7aea" font-weight="bold">
          这是 SVG 中的真正 5px 文字，不受浏览器限制
        </text>
      </svg>
      <div class="measure-ruler"></div>
      <span style="font-size: 10px; color: #718096;">参考：10px文字</span>
    </div>
    <div class="code-block">
      &lt;svg width="300" height="25"&gt;
      &lt;text x="0" y="15" font-size="5px" fill="black"&gt;
      这是 SVG 中的 5px 文字
      &lt;/text&gt;
      &lt;/svg&gt;</div>
    <div class="browser-support">
      <div class="browser-item">
        <div class="browser-name">Chrome</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Firefox</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Safari</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
      <div class="browser-item">
        <div class="browser-name">Edge</div>
        <div class="browser-support-level support-good">完全支持</div>
      </div>
    </div>
  </div>

  <div class="tip">
    <span class="tip-icon">��</span>
    <strong>最佳实践：</strong>
    <ul style="margin: 10px 0; padding-left: 20px;">
      <li>推荐使用 <strong>Transform Scale</strong> 方法，兼容性最好</li>
      <li>如果需要精确的 5px 效果，考虑使用 <strong>SVG</strong></li>
      <li>注意 5px 字体在移动设备上可能难以阅读</li>
      <li>建议在实际项目中测试不同浏览器的效果</li>
    </ul>
  </div>
</div>
</body>
</html>
